<template>
    <div id="xianjia">
        <div class="indexstoreHome">
            <div class="storeHomeNew">
                <div class="store-new-title-wrap clearfix">
                    <img :src="imgUrl+'/upload/5acc2509N7c45bbc8.jpg'" alt="" class="store-new-logo" @click="toindex()">
                    <div class="store-new-info-wrap">
                        <div class="store-title-box clearfix">
                            <h2 class="store-new-title">鲜家-新街口店(苏红菜场）</h2>
                            <div class="store-focus-wrap ">
                                <i class="store-focus "></i>
                            </div>
                        </div>
                        <div class="jsdSty">
                            <img :src="assets.storehuiyuan" alt="" class="jsdStyimg">
                        </div>
                        <p class="store-delivery-tip" style="margin-top:5px">达达专送<span>&nbsp;.60分钟</span></p>
                        <p class="store-delivery-tip" style="margin-top:-5px"><span class="store-icon-txt">基础运费4元</span></p>
                    </div>
                    <ul class="couponAndTag" style="padding:0">
                        <li class="index-store-fujia-item store-single-promot">
                            <span class="promotion-tags promotion-tags-full" style="background: -webkit-linear-gradient(left top, rgb(76, 156, 255), rgb(36, 134, 255));">
                                <span>运费</span>
                            </span>
                            <span class="index-store-fujia-desc">商家会员满59元减4元运费(每月4次)</span>
                            <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   2种优惠
                            </span>
                        </li>
                    </ul>
                </div>
                <div class="store-tab-bar flex">
                    <div class="store-search-bar flex">
                        <div class="store-search-wrap">
                            <div class="home-search">
                                <span>搜索店内商品，共1599件好物</span>
                            </div>
                        </div>
                        <span class="couponEnter moreCoupon" @click="block()">
                          <img :src="imgUrl+'/upload/groupCopy.268ca879.png'" alt="" style="height: 30px;width: 47px;">
                        </span>
                    </div>
                </div>
                <div class="store-act-box" @click="tostore()">
                    <img :src="assets.xjimg" alt="" class="store-act-banner-pic">
                </div>
                <div class="store-goods-floor" style="height:628px;margin-top:1px;">
                   <el-container>
                        <el-aside width="80px" height="628px">
                            <ul class="store-goods-left">
                                <li><router-link  to="/storetab1" class="store-goods-leftItem active" style=" text-decoration:none;display:block" v-on:change="addClass($event)">为你优选</router-link></li>
                                <li><router-link  to="/storetab2" class="store-goods-leftItem" style="text-decoration:none;display:block" v-on:change="addClass($event)">单品优惠</router-link></li>
                                <li><router-link  to="/storetab3" style="text-decoration:none;display:block" class="store-goods-leftItem" v-on:change="addClass($event)">热销榜</router-link></li>
                                <li class="store-goods-leftItem">新鲜蔬菜</li>
                                <li class="store-goods-leftItem">最绿蔬菜</li>
                                <li class="store-goods-leftItem">南京本地农民菜</li>
                                <li class="store-goods-leftItem">生鲜肉品</li>
                                <li class="store-goods-leftItem">豆类制品</li>
                                <li class="store-goods-leftItem">主食/面制品/水饺</li>
                                <li class="store-goods-leftItem">水产鱼虾</li>
                                <li class="store-goods-leftItem">优质蛋品</li>
                                <li class="store-goods-leftItem">新鲜水果</li>
                                <li class="store-goods-leftItem">调味品专区</li>
                                <li class="store-goods-leftItem">粮油副食专区</li>
                                <li class="store-goods-leftItem">活禽蛋类</li>
                                <li class="store-goods-leftItem">现磨杂粮粉系列</li>
                                <li class="store-goods-leftItem">酒水饮料</li>
                                <li class="store-goods-leftItem">坚果炒货/蜜饯</li>
                            </ul>
                        </el-aside>
                        <el-main style="overflow-y:scroll;height:628px">
                            <router-view style="overflow-y:scroll;height:628px">
                            </router-view>
                        </el-main>
                    </el-container>
                </div>
                <div class="mini-cart" style="height:100px;" >
                  <Car :goodsId="goods_id"></Car>
                </div>
                <div class="popup-layer">
                  <div class="popup-mask "></div>
                  <div class="popup-box ipx-pad popup-box-show">
                    <div class="popup-t">优惠红包及优惠券</div>
                    <span class="popup-close" @click="toggle()">X</span>
                    <div class="popup-content">
                      <div class="couponContent">
                        <p class="title">店铺优惠券</p>
                        <!-- <p class="subtitle"></p> -->
                        <div class="storeCoupon">
                          <div class="coupon-box   undefined">
                            <div class="conpon-value flex flex-vertical flex-justify-center">
                              <div class="conpon-value-inner-top">
                                <span class="conpon-number">40</span>
                                <span class="conpon-unit">元</span>
                              </div>
                            </div>
                            <div class="conpon-centerinner-wrap flex flex-vertical flex-align-top flex-justify-center">
                              <div class="conpon-showinfo">满399元可用</div>
                              <div class="conpon-detail-info">关注后领取该粉丝券</div>
                              <div class="conpon-detail-info">领取后当日有效</div>
                            </div>
                            <div class="conpon-right-box conpon-to-store-wrap">
                              <div class="conpon-get-box">
                                <span class="conpon-get-btn">领券</span>
                              </div>
                            </div>
                          </div>
                          <div class="coupon-box   undefined">
                            <div class="conpon-value flex flex-vertical flex-justify-center">
                              <div class="conpon-value-inner-top">
                                <span class="conpon-number">20</span>
                                <span class="conpon-unit">元</span>
                              </div>
                            </div>
                            <div class="conpon-centerinner-wrap flex flex-vertical flex-align-top flex-justify-center">
                              <div class="conpon-showinfo" style="margin-top:14px;">满86元可用</div>
                              <!-- <div class="conpon-detail-info">关注后领取该粉丝券</div> -->
                              <div class="conpon-detail-info">领取后当日有效</div>
                            </div>
                            <div class="conpon-right-box conpon-to-store-wrap">
                              <div class="conpon-get-box">
                                <span class="conpon-get-btn">领券</span>
                              </div>
                            </div>
                          </div>
                          <div class="coupon-box   undefined">
                            <div class="conpon-value flex flex-vertical flex-justify-center">
                              <div class="conpon-value-inner-top">
                                <span class="conpon-number">20</span>
                                <span class="conpon-unit">元</span>
                              </div>
                            </div>
                            <div class="conpon-centerinner-wrap flex flex-vertical flex-align-top flex-justify-center">
                              <div class="conpon-showinfo">满59元可用</div>
                              <div class="conpon-detail-info">限鲜家使用</div>
                              <div class="conpon-detail-info">领取后当日有效</div>
                            </div>
                            <div class="conpon-right-box conpon-to-store-wrap">
                              <div class="conpon-get-box">
                                <span class="conpon-get-btn">领券</span>
                              </div>
                            </div>
                          </div>
                          <div class="coupon-box   undefined">
                            <div class="conpon-value flex flex-vertical flex-justify-center">
                              <div class="conpon-value-inner-top">
                                <span class="conpon-number">15</span>
                                <span class="conpon-unit">元</span>
                              </div>
                            </div>
                            <div class="conpon-centerinner-wrap flex flex-vertical flex-align-top flex-justify-center">
                              <div class="conpon-showinfo">满39元可用</div>
                              <div class="conpon-detail-info">限鲜家使用</div>
                              <div class="conpon-detail-info">领取后当日有效</div>
                            </div>
                            <div class="conpon-right-box conpon-to-store-wrap">
                              <div class="conpon-get-box">
                                <span class="conpon-get-btn">领券</span>
                              </div>
                            </div>
                          </div>
                          <div class="coupon-box   undefined">
                            <div class="conpon-value flex flex-vertical flex-justify-center">
                              <div class="conpon-value-inner-top">
                                <span class="conpon-number">8</span>
                                <span class="conpon-unit">元</span>
                              </div>
                            </div>
                            <div class="conpon-centerinner-wrap flex flex-vertical flex-align-top flex-justify-center">
                              <div class="conpon-showinfo">满39元可用</div>
                              <div class="conpon-detail-info">限鲜家使用</div>
                              <div class="conpon-detail-info">领取后当日有效</div>
                            </div>
                            <div class="conpon-right-box conpon-to-store-wrap">
                              <div class="conpon-get-box">
                                <span class="conpon-get-btn">领券</span>
                              </div>
                            </div>
                          </div>
                          <div class="coupon-box   undefined">
                            <div class="conpon-value flex flex-vertical flex-justify-center">
                              <div class="conpon-value-inner-top">
                                <span class="conpon-number">5</span>
                                <span class="conpon-unit">元</span>
                              </div>
                            </div>
                            <div class="conpon-centerinner-wrap flex flex-vertical flex-align-top flex-justify-center">
                              <div class="conpon-showinfo">满39元可用</div>
                              <div class="conpon-detail-info">限鲜家使用</div>
                              <div class="conpon-detail-info">领取后当日有效</div>
                            </div>
                            <div class="conpon-right-box conpon-to-store-wrap">
                              <div class="conpon-get-box">
                                <span class="conpon-get-btn">领券</span>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  
                </div>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
#xianjia {
  margin: 0;
  padding: 0;
  font-family: Microsoft YaHei, Verdana, Arial, Helvetica, sans-serif;
  font-size: 14px;
  background-color: #fafafa;
  word-wrap: break-word;
  width: 100%;
  .indexstoreHome {
    .storeHomeNew {
      background-color: #fff;
      .store-new-title-wrap {
        position: relative;
        color: #333;
        box-sizing: border-box;
        padding: 8px 10px 15px;
        .store-new-logo {
          position: absolute;
          width: 68px;
          height: 68px;
          box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.08);
        }
        .store-new-info-wrap {
          padding-left: 78px;
          line-height: 20px;
          min-height: 70px;
          overflow: hidden;
          text-overflow: ellipsis;
          margin-bottom: 15px;
          .store-title-box {
            margin-right: 30px;
            .store-new-title {
              float: left;
              width: 100%;
              line-height: 22px;
              font-size: 18px;
              font-weight: 700;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
              margin: 0;
            }
            .store-focus-wrap {
              position: absolute;
              top: -1px;
              right: 10px;
              font-size: 12px;
              color: #fff;
              text-align: right;
              width: 30px;
              height: 30px;
              padding-left: 10px;
              .store-focus {
                display: block;
                width: 30px;
                height: 30px;
                background: url("http://127.0.0.1:8088/upload/focus.5662b820.png")
                  no-repeat;
                background-position: 3px 4px;
                background-size: 68px auto;
              }
            }
          }
          .clearfix:after {
            clear: both;
            display: block;
            content: "...";
            visibility: hidden;
            height: 0;
            font-size: 0;
          }
          .jsdSty {
            position: absolute;
            top: 33px;
            right: 10px;
            width: 68px;
            height: 38px;
            max-width: 68px;
            max-height: 38px;
            text-align: center;
            z-index: 1;
            .jsdStyimg {
              max-height: 38px;
              max-width: 68px;
              box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
              border-radius: 4px;
            }
          }
          .store-delivery-tip {
            position: relative;
            line-height: 15px;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            font-size: 12px;
            padding-right: 68px;
          }
        }
        .couponAndTag {
          list-style: none;
          .index-store-fujia-item {
            font-size: 11px;
            position: relative;
            color: #666;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
            line-height: 14px;
          }
          .store-single-promot {
            margin: 10px 0 0;
            .promotion-tags {
              display: inline-block;
              padding: 0 3px;
              font-size: 10px;
              height: 14px;
              line-height: 14px;
              border-radius: 4px 1px;
              color: #fff;
              z-index: 1;
              box-sizing: border-box;
            }
            .promotion-tags-full {
              margin-right: 3px;
            }
            .index-store-fujia-desc {
              display: inline-block;
              max-width: 70%;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
              font-size: 11px;
              vertical-align: top;
            }
          }
        }
      }
      .store-tab-bar {
        background: #fff;
        position: sticky;
        top: 0;
        z-index: 14;
        white-space: nowrap;
        flex-direction: column;
        .store-search-bar {
          -webkit-box-flex: 1;
          flex: 1 1;
          overflow: hidden;
          display: flex;
          padding: 5px 10px;
          box-sizing: border-box;
          .store-search-wrap {
            position: relative;
            background: #f4f4f4;
            height: 30px;
            line-height: 21px;
            border-radius: 30px;
            overflow: hidden;
            .home-search {
              font-size: 14px;
              color: #999;
              text-align: left;
              background: url("http://127.0.0.1:8088/upload/search_bar_sprites.57c20493.png")
                no-repeat;
              background-size: 44px auto;
              background-position: -5px -7px;
              padding-left: 27px;
              line-height: 30px;
              height: 30px;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
              display: block;
              width: 281px;
            }
            .couponEnter {
              display: inline-block;
            }
          }
        }
      }
      .store-act-box {
        .store-act-banner-pic {
          display: block;
          width: 351px;
          height: 113.6px;
          background: #f4f4f4;
          border-radius: 4px;
          margin: 0 auto;
        }
      }
      .store-goods-floor {
        overflow: hidden;
        .el-container {
          align-items: stretch;
          position: relative;
          flex-direction: row;
          width: 100%;
          height: 628px;
          .el-aside {
            position: relative;
            overflow-y: auto;
            background: #fafafa;
            .store-goods-left {
              width: 80px;
              padding-bottom: 80px;
              padding-left: 0;
              background-color: #fafafa;
              position: relative;
              list-style: none;
              .store-goods-leftItem {
                width: auto;
                height: 46px;
                padding: 2px 12px;
                line-height: 21px;
                text-overflow: ellipsis;
                overflow: hidden;
                color: #666;
                font-size: 14px;
              }
              .active {
                width: auto;
                height: 46px;
                padding: 2px 12px;
                line-height: 21px;
                text-overflow: ellipsis;
                overflow: hidden;
                font-size: 14px;
                color: #333;
                font-weight: 700;
                background-color: #fff;
              }
            }
          }
          .el-main {
            flex-direction: column;
            -webkit-box-orient: vertical;
            background-color: #fff;
            overflow: hidden;
            padding: 0;
          }
        }
      }
      .popup-layer {
        display: none;
        z-index: 1004;
        position: fixed;
        left: 0;
        top: 0;
        width: 100vw;
        height: 100%;
        background: transparent;
        .popup-mask {
          position: absolute;
          left: 0;
          width: 100%;
          top: 0;
          height: 100%;
          background: rgba(0, 0, 0, 0.4);
        }
        // .popup-box-show {
        //   transform: translateY(0);
        //   transition: all 0.6s;
        // }
        .popup-box {
          bottom: 0;
          height: 80%;
          background: #fff;
          border-radius: 10px 10px 0 0;
          color: #333;
          display: flex;
          flex-direction: column;
          box-sizing: border-box;
          position: absolute;
          left: 0;
          width: 100%;
        }
        .ipx-pad {
          padding-bottom: env(safe-area-inset-bottom);
          .popup-t {
            font-weight: 600;
            text-align: center;
            margin: 15px 0;
            font-size: 16px;
            line-height: 22px;
            position: relative;
          }
          .popup-close {
            position: absolute;
            width: 23px;
            height: 23px;
            top: 13px;
            right: 9px;
            padding: 3px;
            box-sizing: border-box;
          }
          .popup-content {
            flex: 1 1;
            overflow-y: scroll;
            .couponContent {
              margin: 0 10px;
              .title {
                color: #333;
                font-size: 16px;
                line-height: 20px;
                font-weight: 700;
                padding-top: 15px;
              }
              .subtitle {
                color: #999;
                font-size: 12px;
                line-height: 16px;
                padding: 6px 0 12px;
                min-height: 2px;
              }
              .storeCoupon {
                .coupon-box {
                  margin-bottom: 15px;
                  box-sizing: border-box;
                  position: relative;
                  display: flex;
                  flex-direction: row;
                  color: #555;
                  align-items: center;
                  height: 70px;
                  border-radius: 5px;
                  overflow: hidden;
                  border-left: 3px solid #ff5757;
                  .conpon-value {
                    display: flex;
                    width: 74px;
                    height: 100%;
                    font-size: 20px;
                    text-align: center;
                    background-color: #fffbfb;
                    border-top: 1px solid #ff9d9d;
                    border-bottom: 1px solid #ff9d9d;
                    box-sizing: border-box;
                    justify-content: center;
                    .conpon-value-inner-top {
                      height: 60px;
                      line-height: 60px;
                      .conpon-number {
                        font-size: 20px;
                        color: #ff4f64;
                        font-family: Arial, Microsoft YaHei, Verdana, Helvetica,
                          sans-serif;
                      }
                      .conpon-unit {
                        margin-left: 2px;
                        font-size: 15px;
                        color: #ff4f64;
                      }
                    }
                  }
                  .conpon-centerinner-wrap {
                    flex: 1 1;
                    padding-left: 4px;
                    height: 100%;
                    background-color: #fffbfb;
                    border-top: 1px solid #ff9d9d;
                    border-bottom: 1px solid #ff9d9d;
                    border-right: 1px solid #ff9d9d;
                    border-top-right-radius: 8px;
                    border-bottom-right-radius: 8px;
                    box-sizing: border-box;
                    overflow: hidden;
                    justify-content: center;
                    align-items: flex-start;
                    .conpon-showinfo {
                      text-overflow: ellipsis;
                      overflow: hidden;
                      white-space: nowrap;
                      width: 100%;
                      margin-top: 4px;
                      margin-bottom: 4px;
                      color: #333;
                      font-size: 15px;
                    }
                    .conpon-detail-info {
                      margin-bottom: 3px;
                      font-size: 11px;
                      color: #666;
                      text-overflow: ellipsis;
                      overflow: hidden;
                      white-space: nowrap;
                      width: 100%;
                    }
                  }
                  .conpon-right-box {
                    width: 60px;
                    height: 100%;
                    padding-left: 10px;
                    .conpon-get-box {
                      width: 100%;
                      height: 100%;
                      border-top-right-radius: 5px;
                      border-bottom-right-radius: 5px;
                      border-top-left-radius: 5px;
                      border-bottom-left-radius: 5px;
                      background-color: #fffbfb;
                      border: 1px solid #ff9d9d;
                      box-sizing: border-box;
                      .conpon-get-btn {
                        display: block;
                        width: 50px;
                        height: 20px;
                        font-size: 13px;
                        color: #fefffe;
                        text-align: center;
                        line-height: 20px;
                        margin: 24px auto 0;
                        background-color: #ff5757;
                        border-radius: 20px;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>

<script>
export default {
  props: ["goods_id"],
  data() {
    return {
       totalnum:1
    };
  },

  created() {
    //购物车初始化
    this.cars[this.goods_id];
  },
  methods: {
    toindex(){
      this.$router.push({
        name:'index'
      })
    },
    block() {
      const PopupLayer = document.querySelector(".popup-layer");
      PopupLayer.style.display = "block";
      PopupLayer.style.transform = "translateY(0)";
      PopupLayer.style.transition = "all 0.6s";
    },
    toggle() {
      const PopupLayer = document.querySelector(".popup-layer");
      PopupLayer.style.display = "none";
      PopupLayer.style.transform = "translateY(100%)";
      PopupLayer.style.transition = "all 0.6s";
    },
    tostore() {
      this.$router.push({
        name: "index"
      });
    },
    addClass(e) {
      console.log(e);
      if (e.target.className == "store-goods-leftItem") {
        e.target.classList.toggle("active");
        e.stopPropagation();
      }
    }
  }
};
</script>


